<template>
<div class="wrap">
     <van-nav-bar @click-left="onClickLeft" left-arrow left-text="返回" title="" >
       
    </van-nav-bar>
   <van-form @submit="onSubmit">
  <van-field
    v-model="form.content"
    name="维修内容"
    label="维修内容"
    placeholder="维修内容"


     rows="2"
  autosize

  type="textarea"
  maxlength="50"

  show-word-limit
    :rules="[{ required: true, message: '请填写姓名' }]"
  />
  <van-field
    v-model="form.remark"
    name="备注"
    label="备注"
    placeholder="备注"
      rows="2"
  autosize

  type="textarea"
  maxlength="50"

  show-word-limit
    :rules="[{ required: true, message: '备注' }]"
  />
 
 
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>  
</div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/myinfo.js'
    export default {
        data: function () {
            return {
                info:{},
               form:{
                   remark:'',
                   content:''
               }
            }
        },
        created(){
            //this.getlist()
            
        },
        mounted() {
            let that=this
           api.getInfo().then(e=>{
               that.form.phone=e.data.phone
               that.form.name=e.data.name
           }).catch(err=>{
               
           })
        },
        methods: { 
             onClickLeft() {
               this.$router.go(-1)
            },
            onSubmit(){
                
                let that=this
              
               if(!this.form.content){
                   Toast('维修内容不能为空')
                   return 
               }
                
                that.form.openId=openid
                
                that.form.title=that.form.content.substring(0,6)
               
                Dialog.confirm({
                    title: '已确认提交？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    Toast.loading({
                        duration:0,
                        message: '...',
                        forbidClick: true,
                    });
                   
                    api.addRemark(that.form).then(e=>{
                        if(e.code==200){
                            Toast.clear()
                            Notify({ type: 'success', message: '录入成功' });
                            that.$router.go(-1)
                        }
                        
                    }).catch(err=>{
                        console.log(err)
                    })
                })
                .catch((err) => {
                    console.log(err)
                });
            }
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
    .add-desc{
        color:#1989fa
    }
    .wrap{
        font-size:px2rem(11px);
        background:#f5f5f5;
    }
  .wrap-list{
      border-radius:6px;
       box-sizing: border-box;
      padding:12px 16px 14px 16px;
      background:#fff;
      width:95%;
      margin: 6px auto;
  }
  .wrap-list .inner{
      display:flex;
      align-items: center;
      justify-content: space-between;
     

}
.phone{
    margin:6px 0;
}
.wrap-list .btns{
    display:flex;
    justify-content: flex-end;
    
}
.wrap-list .btns .pass{
    color:green;
    padding-right:12px;
   
    
}
.wrap-list .btns .pass:after{
  display:block;
   content: '';
   height:16px;
   position:relative;
   top:-50%;
   border-right:1px solid red; 
   right:-6px; 
    
}
.wrap-list .btns .nopass{
    color:red;
    
}

</style>
